<%--
  Created by IntelliJ IDEA.
  User: 您的名字
  Version: 1.0
 --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>EasyUI CRUD 示例页面</title>
    <meta charset="UTF-8">
    <base href="<%=request.getContextPath()%>/">
    <!-- 引入 EasyUI 的默认主题样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/bootstrap/easyui.css">
    <!-- 引入 EasyUI 的图标样式 -->
    <link rel="stylesheet" type="text/css" href="static/js/easyui/themes/icon.css">
    <!-- 引入自定义的公共CSS -->
    <link rel="stylesheet" type="text/css" href="static/css/common.css"/>
    <!-- 引入 EasyUI 默认的 jQuery（无需单独引入 jQuery） -->
    <script src="static/js/easyui/jquery.min.js"></script>
    <!-- 引入 EasyUI 的核心 JS 文件 -->
    <script src="static/js/easyui/jquery.easyui.min.js"></script>
    <!-- 引入 EasyUI 的中文语言包 -->
    <script src="static/js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/common.js"></script>
    <!-- 引入自定义的公共脚本 -->
    <script src="static/js/owner/dataGrid.js"></script>
    <!-- 引入 moment.js 库，用于处理日期和时间 -->
    <script src="static/js/owner/moment.min.js"></script>
    <!-- daterangepicker 是一个日期范围选择插件，支持选择开始和结束日期 -->
    <link rel="stylesheet" href="static/css/daterangepicker.css">
    <!-- 引入 daterangepicker 的脚本文件 -->
    <script src="static/js/owner/daterangepicker.js"></script>
</head>
<style>
    /* 主容器布局 */
    #tabs { /* 适配EasyUI tabs容器 */
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    /* 特殊行处理 */
    #previewContainer {
        display: none;
    }
</style>
<body>

<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="openTab()">选项卡</a>

<!-- 详细信息窗口 -->
<div id="tabWindow" class="easyui-window" data-options="closed:true">
    <div id="tabs" class="easyui-tabs" style="width:100%;height:100%;">
        <div id="div" title="基本信息" data-options="iconCls:'icon-reload',closable:false" style="padding:20px;">
            <iframe id="contentFrame"
                    src="demo/tab1"
                    scrolling="auto"
                    frameborder="0"
                    loading="lazy"
                    width="100%"
                    height="100%"></iframe>
        </div>
        <div title="设备详情" data-options="iconCls:'icon-reload',closable:false, disabled: true" style="padding:20px;">
            <iframe id="detailFrame"
                    src="demo/tab2"
                    scrolling="auto"
                    frameborder="0"
                    loading="lazy"
                    width="100%"
                    height="100%"></iframe>
        </div>
    </div>
</div>

</body>

<!-- 定义页面脚本 -->
<script type="text/javascript">
    var $tabs;
    var aa = '11';

    // 验证必填字段
    const validateRules = [
        { selector: '#productName', msg: '产品包名称不能为空' },
        { selector: '#file', type: 'filebox', msg: '图片不能为空' },
        { selector: '#project', type: 'combobox', msg: '请选择关联项目' },
        { selector: '#buyCount', regex: /^\d+$/, msg: '购买次数需为正整数' },
        { selector: '#money', type: 'numberbox', msg: '金额格式错误' }
    ];

    $(function () {
        $tabs = $("#tabs");

        $("#file").filebox({
            buttonText: '选择图片',
            accept: 'image/*',
            onChange: previewImage
        })
    })

    function previewImage() {
        const file = $("#file").filebox('files')[0];
        const preview = document.getElementById('previewImg');
        const container = document.getElementById('previewContainer');

        if (file && file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = function (e) {
                preview.src = e.target.result;
                container.style.display = 'block';
            };
            reader.readAsDataURL(file);
        } else {
            container.style.display = 'none';
        }
    }

    // 打开详情窗口
    function openTab() {
        $('#tabWindow').window({
            title: '信息',
            width: 800,
            height: 600,
            modal: true,
            iconCls:'icon-save',
        }).window('open').window('center');
    }

    // 通用验证函数
    function validateForm(rules) {
        for (const rule of rules) {
            let value;
            if (rule.type  === 'combobox') {
                value = $(rule.selector).combobox('getValue');
            } else if (rule.type  === 'numberbox') {
                value = $(rule.selector).numberbox('getValue');
            } else if (rule.type  === 'filebox') {
                value = $(rule.selector).filebox('files')[0];
            } else {
                value = $(rule.selector).val();
            }

            if (
                (rule.regex  && !rule.regex.test(value))  ||
                (!rule.regex  && !value)
            ) {
                $.messager.alert(' 警告', rule.msg);
                return false;
            }
        }
        return true;
    }

    function nextTab() {
        if (!validateForm(validateRules)) return;

        const formData = new FormData();

        // 添加普通字段
        formData.append('productName',  $('#productName').val());
        formData.append('project',  $('#project').combobox('getValue'));
        formData.append('buyCount',  $('#buyCount').val());
        formData.append('money',  $('#money').numberbox('getValue'));

        // 添加文件对象
        const file = $('#file').filebox('files')[0];
        if (file) {
            formData.append('productImage',  file);
        }

        $.ajax({
            url: 'tabSave',
            data: formData,
            type: 'post',
            contentType: false,  // 必须设置
            processData: false,  // 必须设置
            dataType: 'json',
            success: function (data) {
                $.messager.show({
                    title: '提示',
                    msg: '保存成功！',
                    timeout: 3000, // 自动关闭时间，单位毫秒
                    showType: 'slide' // 显示动画类型，如 'slide', 'fade', 'show'
                });

                $tabs.tabs('enableTab', '设备详情');
                $tabs.tabs('select', '设备详情');
            },
            error: function () {

            }

        })
        // 或通过标题切换（推荐方式，避免动态索引变化）
        $tabs.tabs('disableTab', '基本信息');
    }
</script>
</body>
</html>
